<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 微软的老式浏览器 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!-- 显示窗口 宽度 是 客户端的 屏幕 宽度 （就是 满屏 ！），显示的文字和图形的初始比例 是 1.0 -->
    <!--<link rel="stylesheet" href="css/layui.mobile.css">-->
    <link rel="stylesheet" type="text/css" href="css/style.css"><!-- 基本样式 -->
    <link rel="stylesheet" type="text/css" href="css/index.css"><!-- 基本样式 -->
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css" /><!-- 点赞桃心样式 -->
    <script src="js/common.js"></script>
    <title>个人信息页面</title>
    <style>
      .spinner{width:20px;height:20px;position:fixed;z-index:1002;top:50%;margin-top:-10px;left:50%;margin-left:-10px}.container1>div,.container2>div,.container3>div{width:6px;height:6px;background-color:#ff536a;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinner .spinner-container{position:absolute;width:100%;height:100%}.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.circle1{top:0;left:0}.circle2{top:0;right:0}.circle3{right:0;bottom:0}.circle4{left:0;bottom:0}.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}40%{transform:scale(1.0);-webkit-transform:scale(1.0)}}#loading .mask{position:fixed;width:100%;background-color:#fff;top:0;left:0;height:100%;z-index:1001}
    </style>
</head>
<body>
<div id="loading">
    <div class="mask"></div>
    <div class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
</div>
   <div style="position: relative;margin-bottom: 60px;">
        <!-- 我的图片s -->
       <div class="personal-photo">
           <div class="swiper-container swiper-container-horizontal">
               <div class="swiper-wrapper" id="imglist" >
               </div>
               <!-- Add Pagination -->
               <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets" style="position: absolute;bottom: 10px"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span></div>
               <!-- Add Arrows -->
           </div>
       </div>
        <!-- 我的图片e -->
        <!-- 我的名字个人信息s -->
       <div class="personal-message">
          <!-- 关注图标开始 -->
          <div class="containericon" id="scbtn" onclick="followbtn(this)">
          </div><!-- 关注图标结束 -->
          <div style="text-align: center;">
            <h3 id="name" class="fl">夏洛特烦恼</h3>
            <span class="xbicon"></span>
          </div>
          <div class="companybox">
            <p id="gsname"></p>
            <div class="companybox-iconbox">
                <i class="icon-user icon-2x" id="sfrz"></i>
                <i class="icon-mobile-phone icon-3x" id="phonerz"></i>
                <i class="icon-file icon-2x" id="xlrz"></i>
                <i class="icon-briefcase" id="gsrz"></i>
                <i class="icon-credit-card" id="zcrz"></i>
            </div> 
          </div>
           <div class="box-age">
               <i class=" icon-gift icon-3x"> <span id="age">21岁</span></i>
               <i class="  icon-star icon-3x">  <span id="xz">处女座</span></i>
               <i class="  icon-fire  icon-3x"> <span id="sg">168cm</span></i>
               <i class=" icon-briefcase icon-3x">  <span id="zy">自由职业者</span></i>
               <i class=" icon-money icon-2x">  <span id="sr">10W-20W</span></i>
               <i class=" icon-home icon-3x">  <span id="adres">北京北京</span></i>


            </div>
       </div>
       <!-- 我的名字个人信息e -->
        <div class="self-description">
            <h3>自我描述</h3>
            <p id="remark"> </p>
        </div>
        <div class="button-box" id="yybtn"><!-- 按钮盒子开始 -->
              <button class="button-stylebg" style="margin: 0" id="jszp" data-id="1" onclick="unlock(this)">解锁照片</button>
              <button class="button-stylebg" id="jswx" data-id="2"  onclick="unlock(this)">解锁微信号</button>
              <!--<a href="Activities-square .html">-->
                  <!--<button class="button-stylebg" id="">邀约线下</button>-->

        </div>
        <div class="label-box">
            <h3>我的标签</h3>
            <div class="label-box-label">
                <!--<div data-id="38" onclick="label(this)" class="">-->
                    <!--<i class="myd"></i>-->
                    <!--<input type="button" value="健壮" class="need">-->
                    <!--<span class="staricon dn">0</span>-->
                <!--</div>-->
            </div>
        </div>
      <div class="m-divider"></div>
        <div class="quesition-box">
            <h3>我的问答</h3>
            <div id="twbox"></div>
        </div><!-- 我的问题结束 -->
        <!-- 底部导航开始 -->
        <div class="Bottom-Navigation " id="footer">
                <input class="inpone" type="button" name="" id="Button1"  value="匿名提问" onclick="ShowDiv1()">

                <input class="inpone"  type="button" name="" id="Button2"  value="留言" onclick="ShowDiv2()" style="width: 50.1%;border:none;">

        </div><!-- 底部导航结束 -->
   </div>
<div class="lydiv lydiv1 dn">
    <h2>提问：<span id="twname"></span><i class="gb" onclick="hiediv()"></i></h2>
    <textarea  placeholder="请输入提问的内容..." id="textarea"></textarea>
    <input type="button"  value="确定" onclick="question()">
</div>
<div class="lydiv lydiv2 dn">
    <h2>留言版 <i class="gb" onclick="hiediv()"></i></h2>
    <textarea  placeholder="请输入你想留下对他的话..." id="textarea2"></textarea>
    <input type="button"  value="确定" onclick="addly()">
</div>
<script src="js/jquery/jquery-2.2.4.min.js"></script>
<script src="js/jquery/swiper.min.js"></script>
<script src="js/jquery/layer.js"></script>
<script src="js/utils.js"></script>
<script src="js/personInfo.js"></script>

</body>
</html>